MPDX-7878 Performance Enhancements and Codebase Simplification #950
Conversation
Condensing css into one file Simplifying the codebase
|
Preview branch generated at https://lazyload-components.d3dytjb8adxkk5.amplifyapp.com |
Bundle sizes [mpdx-react]Compared against f58d594
|
|
run lighthouse |
|
Looks like |
|
run lighthouse |
dr-bizz
added
Preview Environment
|
Preview branch generated at https://lazyload-components.d3dytjb8adxkk5.amplifyapp.com |
dr-bizz
force-pushed
the
lazyload-components
branch
from
824679d
to
26c405c
Compare
|
I think the skeletons look great and definitely help with the UX. I noticed that when you stop scrolling it flashes to the skeletons. I think it was doing that before this PR but flashing to blank instead of the skeletons. contacts.loading.flashing.mov |
So with this, this is actually a feature, not a bug. when you scroll up, we load the tasks above, but there is a split second where the tasks aren't loaded in, so we show the skeletons. |
|
@dr-bizz this seems like a bug to me because it loads and all the data is on the screen, then it flashes the skeletons, then it shows the loaded data again. Are you sure it isn't re-rendering an additional time unnecessarily? |
| {`!function(a,e,t,n,s){a=a[s]=a[s]||{q:[],onReady:function(e){a.q.push(e)}},(s=e.createElement(t)).async=1,s.src=n,(n=e.getElementsByTagName(t)[0]).parentNode.insertBefore(s,n)}(window,document,"script","https://www.datadoghq-browser-agent.com/datadog-rum-v5.js","DD_RUM"),DD_RUM.onReady(function(){DD_RUM.init({clientToken:"${process.env.DATADOG_CLIENT_TOKEN}",applicationId:"${process.env.DATADOG_APP_ID}",site:"datadoghq.com",service:"mpdx-web-react",sessionSampleRate:100,sessionReplaySampleRate:20,trackUserInteractions:!0,trackResources:!0,trackLongTasks:!0,defaultPrivacyLevel:"mask-user-input",env:"${process.env.DD_ENV}",allowedTracingUrls:["${process.env.API_URL}"]})});`} | ||
| </Script> | ||
| )} | ||
| {process.env.GOOGLE_TAG_MANAGER_CONTAINER_ID && ( | ||
| <Script id="google-analytics" strategy="afterInteractive"> | ||
| <Script id="google-analytics" strategy="lazyOnload"> |
There was a problem hiding this comment.
I don't know how much we use these analytics but do you think we will miss any data if it is lazy loaded?
Description
This pull request includes several significant improvements and optimizations to enhance the performance and maintainability of our application:
Loading Fonts via Font-Face: Implemented font loading through the font-face method for faster and more efficient font rendering.
Condensing CSS into One File: Consolidated multiple CSS files into a single file to reduce HTTP requests and improve load times.
Simplifying the Codebase: Refactored and simplified the codebase for better readability and maintainability.
Adding Skeletons to Contacts and Tasks: Introduced skeleton loaders for Contacts and Tasks to improve user experience during data loading.
Removing Delay on Dashboard: Eliminated unnecessary delays on the dashboard for a smoother and more immediate user experience.
Checklist: